<template>

  <div class="common-layout">
    
    <el-container>
        <!--顶部标题-->
      <el-header class="iot_title">
        <h4>商品分类</h4>
        <el-input
      v-model="input3"
      style="width: 350px"
      size="small"
      placeholder="Please Input"
      :prefix-icon="Search"
      class="iot_search"
    />
     </el-header>

      
    <el-container>
        <!--侧边栏-->
      <el-aside width="100px" class="primary">
          <router-link 
            v-for="(item, index) in getSideList"
            :key="item.id"
            class="iot_item"
            :class="{ active: index === activeIndex }"
            @click="setActiveIndex(index)"
          >
            {{ item.name }}
          </router-link>
        </el-aside>

        <!--内容-->
        <el-main class="iot_main">
            <Picture/>
            <div class="secondary-container">
              <div 
              v-for="item in getmainList" 
              :key="item.id" 
              class="category-panel"
              >
    
    
     
               <div class="panel-header">
                  <h3 class="category-name">{{ item.name }}</h3>
                  <router-link class="view-all" :to="`/category/${item.id}`">全部 >></router-link>
                </div>
      
              <div class="product-grid">
                <router-link
                  v-for="product in item.goods"
                  :key="product.id"
                  class="product-card"
                  :to="`/product/${product.id}`"
                 >
                  <img :src="product.picture" class="product-image" alt="商品图片">
                  <p class="product-title">{{ product.name }}</p>
                  <div class="product-price">¥{{ product.price.toFixed(2) }}</div>
                </router-link>
             </div>
            </div>
          </div>
        </el-main>

      </el-container>
    </el-container>
  </div>


</template>

<style scoped>
.iot_title{
    font-weight: 400px;
    text-align: center;
   
    height: 70px;
    line-height: 30px;
}

.iot_main{
    width: 100%;
}
.el-menu-vertical-demo{
  width: 120px;
  background-color: rgb(242, 246, 246);
}
.primary{
  background-color: #efecec;
  display: flex;
  flex-direction: column;
}
.iot_item{
  text-align: center;
  margin-top: 10px;
  text-decoration: none;
  color: rgb(148, 147, 147);
  border-bottom: 1px solid #dedada;
  height: 30px;
  line-height: 30px;
}
.iot_item:hover {
  color: #00bb99; /* 悬停反馈 */
}
</style>


<script  setup>
import Picture from '@/components/picture.vue'
import { ref,onMounted, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getSideAPI } from '@/apis/categoryside'
import { RouterLink,RouterView } from 'vue-router'


const activeIndex = ref(0)
const getSideList=ref([])


const setActiveIndex = (index) => {
  activeIndex.value = index
}


const getSide=async()=>{
  const res=await getSideAPI()
  getSideList.value=res.result
  console.log(res)
}

onMounted(()=>getSide())

const getmainList = computed(() => {
  const currentCategory = getSideList.value[activeIndex.value];
  return currentCategory ? currentCategory.children : []; 
});

</script>